import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
var md5 = require('md5');
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import {
  Row,
  Col,
  Card,
  Icon,
  Tooltip,
  Form,
  Select,
  Input,
  Checkbox,
  Switch,
  Radio,
  message,
  Spin,
} from 'antd';
import styles from './index.less';
import qdbuttom from '@/assets/account/robotSetup/qdbuttom.png';
import qxbuttom from '@/assets/account/robotSetup/qxbuttom.png';

const Search = Input.Search;
const FormItem = Form.Item;
const { Option } = Select;
const RadioGroup = Radio.Group;

class Add extends Component {
  constructor(props) {
    super(props);
    this.state = {
      states: false,
      login:false,
      namelist:[]
    };
  }

  componentDidMount() {
    const { dispatch, Redactobj } = this.props;
    console.log(Redactobj);
    this.newsysgetRolesByCreateUser();
  }

  // 获取用户列表
  newsysgetRolesByCreateUser = () => {
    this.setState({login:true})
    const { dispatch, currentUser } = this.props;
    console.log(currentUser);
    const userVo = {
      createUserId: currentUser.uid,
      uStatus:1
    };
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'userManagement/newsysgetRolesByCreateUser',
        payload: userVo,
        callback: res => {
          console.log(res);
          this.setState({login:false,namelist:res.data||[]})
        },
      });
    });
  };

  onChangeSwitch = states => {
    console.log(states);
    this.setState({ states });
  };

  // 表单数据
  userInfo = () => {
    return this.props.form.getFieldsValue();
    // 使用方法
    // let user  = this.userInfo()
    // console.log(user)
  };

  operation = () => {
    let user = this.userInfo();
    const { dispatch, currentUser } = this.props;
    if(user.name&&user.nametwo&&user.password){
      var reg =/^(((?=.*[A-Za-z])(?=.*\d))|((?=.*[A-Za-z])(?=.*[~!@#$%^&*()_<>]))|((?=.*\d)(?=.*[~!@#$%^&*()_<>])))[A-Za-z\d~!@#$%^&*()_<>]{8,16}$/g;
      if(!reg.test(user.password)){
        return message.error('密码不符合要求，密码支持8-16位大小写字母、数字以及~！@#$%^&*()_<>')
      }
      const userVo = {
        nick: user.nametwo,
        roles: user.uidname,
        uid: user.name,
        remakers: user.namems,
        active: !this.state.states,
        createUserId: currentUser.uid,
        password:window.btoa(user.password),
        robotId:1
      };
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'userManagement/sysAddUser',
          payload: userVo,
          callback: res => {
            console.log('提交', res);
            if (!res.code) {
              message.success(`${res.msg}`);
              this.props.feel('false')
            }
          },
        });
      });
    }else{
      message.info('请检查账号名称、姓名、密码、是否为空')
    }
  };


  checkField=(rule, value, callback)=>{
    var reg =/^(((?=.*[A-Za-z])(?=.*\d))|((?=.*[A-Za-z])(?=.*[~!@#$%^&*()_<>]))|((?=.*\d)(?=.*[~!@#$%^&*()_<>])))[A-Za-z\d~!@#$%^&*()_<>]{8,16}$/g;
    if(reg.test(value)){
      callback('支持8-16位大小写字母、数字和下划线')
    }else{
      callback()
    }
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { login,namelist } =this.state
    const FormItemLayont = {
      labelCol: {
        sm: 24,
        md: 2,
        lg: 1,
      },
      wrapperCol: {
        sm: 24,
        md: 19,
        lg: 22,
      },
    };
    // 多选框参数
    return (
      <div>
        <Spin spinning={login}>
          <div className={styles.der}>
            <Form className="zdyfroma" layout="horizontal">
              <FormItem label="账号名称" className={styles.wardfrom}>
                {getFieldDecorator('name', {
                  initialValue: '',
                  required: true, message: '请输入用户账号'
                })(<Input placeholder="请输入用户账号" />)}
              </FormItem>
              <FormItem label="姓名" className={styles.wardfrom}>
                {getFieldDecorator('nametwo', {
                  initialValue: '',
                  required: true, message: '请输入用户姓名'
                })(<Input placeholder="请输入用户姓名" />)}
              </FormItem>
              <FormItem label="密码" className={styles.wardfrom}>
                {getFieldDecorator('password', {
                  initialValue: '',
                  required: true, message: '请输入密码',
                  validator: this.checkField,
                })(<Input.Password placeholder="请输入用户密码" />)}
              </FormItem>
              <FormItem className="zdyswer" label="状态" {...FormItemLayont}>
                {getFieldDecorator('states', {
                  initialValue: ''
                })(
                  <div>
                    <Switch
                      defaultChecked
                      onChange={this.onChangeSwitch}
                      checked={this.state.states}
                    />
                    <span
                      style={{
                        marginLeft: 20,
                        color: '#1D1D1D',
                      }}
                    >
                      {this.state.states ? '未启用' : '启用'}
                    </span>
                  </div>
                )}
              </FormItem>
              <FormItem className="zdyswer" label="角色名称" {...FormItemLayont}>
                {getFieldDecorator('uidname', {
                  initialValue: []
                })(
                  <Checkbox.Group style={{ width: '100%' }}>
                    {
                       namelist.map((item)=>{
                        return <Checkbox value={item.roleId}>{item.roleName}</Checkbox>
                      })
                    }
                  </Checkbox.Group>
                )}
              </FormItem>
              <FormItem label="备注" className={styles.wardfrom}>
                {getFieldDecorator('namems', {
                  initialValue: ''
                })(<Input placeholder="请输入备注" />)}
              </FormItem>
            </Form>
            <div className={styles.flex}>
              <div>
                {/* <img src={qxbuttom} style={{ marginRight: 50 }} /> */}
                <img onClick={this.operation} src={qdbuttom} />
              </div>
            </div>
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser,
}))(Form.create()(Add));
